<template>
    <div class="login-container flex">
        <div class="login-left">
            <div class="login-left-logo">
                <img :src="logoMini" />
                <div class="login-left-logo-text">
                    <span>{{ getThemeConfig.globalViceTitle }}</span>
                    <span class="login-left-logo-text-msg">{{ getThemeConfig.globalViceTitleMsg }}</span>
                </div>
            </div>
            <div class="login-left-img">
                <!-- <img :src="loginMain" /> -->
                <img :src="loginLeftBg" />
            </div>
            <img :src="loginBg" class="login-left-waves" />
        </div>
        <div class="login-right flex">
            <div class="login-right-warp flex-margin">
                <span class="login-right-warp-one"></span>
                <span class="login-right-warp-two"></span>
                <div class="login-right-warp-mian">
                    <div class="login-right-warp-main-title">{{ getThemeConfig.globalTitle }} </div>
                    <div class="login-right-warp-main-form">
                        <div v-if="!state.isScan">
                            <el-tabs v-model="state.tabsActiveName">
                                <el-tab-pane :label="$t('message.label.one1')" name="account">
                                    <Account />
                                </el-tab-pane>
                                <el-tab-pane :label="$t('message.label.two2')" name="mobile">
                                    <Mobile />
                                </el-tab-pane>
                            </el-tabs>
                        </div>
                        <Scan v-if="state.isScan" />
                        <div class="login-content-main-sacn" @click="state.isScan = !state.isScan">
                            <i class="iconfont" :class="state.isScan ? 'icon-diannao1' : 'icon-barcode-qr'"></i>
                            <div class="login-content-main-sacn-delta"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="login-footer">
            <!-- <div class="logo">
                <img src="../../assets/logo.png" alt="">
            </div> -->
            <div class="warp" style="display: flex; margin-bottom: 5px;">
                <div style="display: flex;">
                    <div style="margin-right: 15px;" @click="openImgDialog('mac')"> <a href="#"><img
                                src="../../assets/mac.png" alt="Mac" width="40" height="40"> </a> </div>
                    <div style="margin-right: 15px;" @click="openImgDialog('android')"> <a href="#"><img
                                src="../../assets/android.png" alt="Android" width="40" height="40"></a> </div>
                    <div style="margin-right: 15px;" @click="openImgDialog('wechat')"> <a href="#"><img
                                src="../../assets/wechat.png" alt="Wechat" width="40" height="40"></a> </div>
                </div>
            </div>
            <div class="about" @click="openDialog">关于</div>
            <div class="copy">Copyright © 2023 LPTeco CO, LTD. All rights reserved.</div>
            <div class="fixedB">
                <el-affix position="bottom" :offset="120">
                    <el-popover placement="left" :width="200" trigger="hover">
                        <template #reference>
                            <div class="itemWarp">
                                <el-image style="width: 30px;" :src="phone1" fit="contain" />
                                <div>联系方式</div>
                            </div>
                        </template>
                        <template #default>
                            <div style="display: flex; gap: 16px; flex-direction: column">
                                <div>
                                    <p style="margin: 0; font-size: 16px;color: #2E2E2E;">
                                        欢迎咨询</p>
                                </div>
                                <div style="display: flex;align-items: center;">
                                    <el-image style="width: 30px;" :src="phone2" fit="contain" />
                                    <div style="margin-left: 10px; font-size: 18px;color: #2E2E2E;">19946934308</div>
                                </div>
                            </div>
                        </template>
                    </el-popover>
                </el-affix>
            </div>
            <div class="fixedA">
                <el-affix position="bottom" :offset="10">
                    <el-popover placement="left" :width="200" trigger="hover">
                        <template #reference>
                            <div class="itemWarp">
                                <el-image style="width: 35px;" :src="logo" fit="contain" />
                                <div>购买咨询</div>
                            </div>
                        </template>
                        <template #default>
                            <div style="display: flex;justify-content: center; flex-direction: column">
                                <div>
                                    <p style="font-size: 20px;color: #2E2E2E;font-weight: bold;text-align: center;">
                                        免费售前咨询</p>
                                    <p style="font-size: 14px;color: #6b6b6b;text-align: center;">获取企业级解决方案</p>
                                </div>
                                <div style="display: flex;justify-content: center;">
                                    <!-- <el-image style="height: 100px;" :src="weweima" fit="contain" /> -->
                                    <vue-qrcode :value="state.erweima" :size="100"></vue-qrcode>
                                </div>
                            </div>
                        </template>
                    </el-popover>
                </el-affix>
            </div>

        </div>

    </div>
    <About ref="aboutRef"></About>
    <Dialog ref="dialogRef"></Dialog>
</template>

<script setup lang="ts" name="loginIndex">
import { defineAsyncComponent, onMounted, reactive, computed, ref } from 'vue';
import { storeToRefs } from 'pinia';
import { useThemeConfig } from '/@/stores/themeConfig';
import { NextLoading } from '/@/utils/loading';
import logoMini from '/@/assets/logo-mini.svg';
import loginBg from '/@/assets/login-bg.svg';
// import loginLeftBg from '/@/assets/login-left-bg.svg';
import loginLeftBg from '/@/assets/bg1.png';
import phone1 from "/@/assets/phone1.png";
import phone2 from "/@/assets/phone2.png";
import logo from "/@/assets/logo.png";

// 引入组件
const Account = defineAsyncComponent(() => import('/@/views/login/component/account.vue'));
const Mobile = defineAsyncComponent(() => import('/@/views/login/component/mobile.vue'));
const Scan = defineAsyncComponent(() => import('/@/views/login/component/scan.vue'));
const Dialog = defineAsyncComponent(() => import('/@/views/login/dialog.vue'));
const About = defineAsyncComponent(() => import('/@/components/about/about.vue'));

// 定义变量内容
const storesThemeConfig = useThemeConfig();
const { themeConfig } = storeToRefs(storesThemeConfig);
const aboutRef = ref()
const dialogRef = ref()
const state = reactive({
    tabsActiveName: 'account',
    isScan: false,
    erweima: 'https://work.weixin.qq.com/u/vcf6c8dfa3bbbd36f2?v=4.1.16.26137'
});

// 获取布局配置信息
const getThemeConfig = computed(() => {
    return themeConfig.value;
});

// 打开about组件
const openDialog = () => {
    aboutRef.value.openDialog()
}
// 打开dialog组件
const openImgDialog = (type: string) => {
    dialogRef.value.openDialog(type)
}

// 页面加载时
onMounted(() => {
    NextLoading.done();
});
</script>

<style scoped lang="scss">
.itemWarp {
    box-sizing: border-box;
    border: 1px solid #ccc;
    padding: 8px 10px;
    background-color: #f3f7ff;
    font-size: 12px;
    font-weight: bold;
}



.login-footer {
    position: relative;
}

.fixedA {
    position: absolute;
    right: 10px;
    z-index: 999999;
}

.fixedB {
    position: absolute;
    right: 10px;
    z-index: 999999;
}

.login-container {
    height: 100%;
    background: var(--el-color-white);

    .login-left {
        flex: 1;
        position: relative;
        background-color: rgba(211, 239, 255, 1);
        margin-right: 100px;

        .login-left-logo {
            display: flex;
            align-items: center;
            position: absolute;
            top: 50px;
            left: 80px;
            z-index: 1;
            animation: logoAnimation 0.3s ease;

            img {
                width: 52px;
                height: 52px;
            }

            .login-left-logo-text {
                display: flex;
                flex-direction: column;

                span {
                    margin-left: 10px;
                    font-size: 28px;
                    color: #01D7B5; //标题色
                }

                .login-left-logo-text-msg {
                    font-size: 12px;
                    color: #01D7B5;
                }
            }
        }

        .login-left-img {
            text-align: center;
            position: absolute;
            top: 45%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 100%;
            height: 52%;

            img {
                width: 80%;
                height: auto;
                animation: error-num 0.6s ease;
            }
        }

        .login-left-waves {
            position: absolute;
            top: 0;
            right: -100px;
        }
    }

    .login-right {
        position: relative;
        width: 700px;

        .login-right-warp {
            border: 1px solid var(--el-color-primary-light-3);
            border-radius: 3px;
            width: 500px;
            height: 500px;
            position: relative;
            overflow: hidden;
            background-color: var(--el-color-white);

            .login-right-warp-one,
            .login-right-warp-two {
                position: absolute;
                display: block;
                width: inherit;
                height: inherit;

                &::before,
                &::after {
                    content: '';
                    position: absolute;
                    z-index: 1;
                }
            }

            .login-right-warp-one {
                &::before {
                    filter: hue-rotate(0deg);
                    top: 0px;
                    left: 0;
                    width: 100%;
                    height: 3px;
                    background: linear-gradient(90deg, transparent, var(--el-color-primary));
                    animation: loginLeft 3s linear infinite;
                }

                &::after {
                    filter: hue-rotate(60deg);
                    top: -100%;
                    right: 2px;
                    width: 3px;
                    height: 100%;
                    background: linear-gradient(180deg, transparent, var(--el-color-primary));
                    animation: loginTop 3s linear infinite;
                    animation-delay: 0.7s;
                }
            }

            .login-right-warp-two {
                &::before {
                    filter: hue-rotate(120deg);
                    bottom: 2px;
                    right: -100%;
                    width: 100%;
                    height: 3px;
                    background: linear-gradient(270deg, transparent, var(--el-color-primary));
                    animation: loginRight 3s linear infinite;
                    animation-delay: 1.4s;
                }

                &::after {
                    filter: hue-rotate(300deg);
                    bottom: -100%;
                    left: 0px;
                    width: 3px;
                    height: 100%;
                    background: linear-gradient(360deg, transparent, var(--el-color-primary));
                    animation: loginBottom 3s linear infinite;
                    animation-delay: 2.1s;
                }
            }

            .login-right-warp-mian {
                display: flex;
                flex-direction: column;
                height: 100%;

                .login-right-warp-main-title {
                    height: 130px;
                    line-height: 130px;
                    font-size: 27px;
                    text-align: center;
                    letter-spacing: 2px;
                    animation: logoAnimation 0.3s ease;
                    animation-delay: 0.3s;
                    white-space: nowrap;
                    color: var(--el-text-color-primary);
                }

                .login-right-warp-main-form {
                    flex: 1;
                    padding: 0 50px 50px;

                    .login-content-main-sacn {
                        position: absolute;
                        top: 0;
                        right: 0;
                        width: 50px;
                        height: 50px;
                        overflow: hidden;
                        cursor: pointer;
                        transition: all ease 0.3s;
                        color: var(--el-color-primary);

                        &-delta {
                            position: absolute;
                            width: 35px;
                            height: 70px;
                            z-index: 2;
                            top: 2px;
                            right: 21px;
                            background: var(--el-color-white);
                            transform: rotate(-45deg);
                        }

                        &:hover {
                            opacity: 1;
                            transition: all ease 0.3s;
                            color: var(--el-color-primary) !important;
                        }

                        i {
                            width: 47px;
                            height: 50px;
                            display: inline-block;
                            font-size: 48px;
                            position: absolute;
                            right: 1px;
                            top: 0px;
                        }
                    }
                }
            }
        }
    }
}

// .login-footer::before {
//     z-index: -1;
//     position: absolute;
//     content: "";
//     right: 0;
//     height: 100%;
//     width: 100%;
//     margin: 0 auto;
//     background: linear-gradient(270deg, #79bd28, #04b5ff);
//     animation: glowmation 10s linear infinite;
//     filter: blur(8vw);
// }

// @keyframes glowmation {
//     0% {
//         top: -3%;
//         left: -3%;
//         background-position: 0 50%;
//     }

//     12.5% {
//         top: -3%;
//         left: 0;
//         background-size: 70% 30%;
//     }

//     25% {
//         top: -3%;
//         left: 3%;
//         background-size: 100% 50%;
//     }

//     37.5% {
//         top: 0;
//         left: 3%;
//         background-size: 70% 30%;
//     }

//     50% {
//         top: 3%;
//         left: 3%;
//         background-position: 100% 50%;
//         background-size: 30% 30%;
//     }

//     62.5% {
//         top: 3%;
//         left: 0;
//         background-size: 30% 70%;
//     }

//     75% {
//         top: 3%;
//         left: -3%;
//         background-size: 50% 100%;
//     }

//     87.5% {
//         top: 0;
//         left: -3%;
//         background-size: 30% 70%;
//     }

//     100% {
//         top: -3%;
//         left: -3%;
//         background-position: 0 50%;
//         background-size: 150% 150%;
//     }
// }

.login-footer {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    line-height: 20px;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    padding: 5px;

    .about {
        font-size: 14px;
        box-sizing: border-box;
        width: 50px;
        height: 25px;
        color: #666;

        &:hover {
            border-bottom: 1px solid #26a59a;
            color: #26a59a;
        }
    }

    .copy {
        color: dimgray;
        font-size: 12px;
    }
}

// 登录页背景颜色
.login-container {
    background: linear-gradient(-45deg, #94c9ff, #003f97);
    background-size: 150% 150%;
    animation: gradient 3s ease infinite;
}

@keyframes gradient {
    0% {
        background-position: 0 12%;
    }

    50% {
        background-position: 100% 100%;
    }

    100% {
        background-position: 0 12%;
    }
}


// 底部线条
// .warp {
//     position: relative;
// }

// .warp::before,
// .warp::after {
//     position: absolute;
//     content: "";
//     display: block;
//     width: 45vw;
//     height: 1px;
//     background-color: #bee7ff;
//     // background-image: linear-gradient(to bottom, #e7f7ff 0%, #e2f5ff 25%, #d1ebfa 50%, #caecff 75%, #bee7ff 100%);
//     margin: 0 auto;
// }


// .warp::before {
//     top: 17px;
//     left: 210px;
// }

// .warp::after {
//     top: 17px;
//     right: 225px;
// }
</style>